<template>
  <div class="storeManage">
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="6">
          <p>仓库名称</p>
          <el-input
            placeholder="请输入"
            v-model="form.warehouseName"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <p>库区名称</p>
          <el-input placeholder="请输入" v-model="form.name"></el-input>
        </el-col>
        <el-col :span="6">
          <p>仓库状态</p>
          <el-select
            v-model="form.status"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option label="全部" value></el-option>
            <el-option label="启用" :value="1"></el-option>
            <el-option label="停用" :value="0"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <div class="btn">
            <el-button type="warning" @click="searchFn">搜索</el-button>
            <el-button @click="cancle">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <div class="tableInfo">
        <button class="addBtn" @click="$router.push('/detail1')">
          新增库区
        </button>
        <div class="textRight">
          <button class="left" @click="exportExcel">下载库区模板</button>
          <button class="right" @click="importFn">导入库区信息</button>
        </div>
      </div>
      <el-table
        :data="tableList"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="warehouseName" label="所属仓库" width="120">
        </el-table-column>
        <el-table-column prop="code" label="库区编号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="库区名称" width="120">
        </el-table-column>
        <el-table-column prop="temperatureType" label="温度类型" width="300">
        </el-table-column>
        <el-table-column prop="bearingType" label="承重类型" width="120">
        </el-table-column>
        <el-table-column prop="useType" label="用途属性" width="120">
        </el-table-column>
        <el-table-column prop="status" label="库区状态" width="120">
        </el-table-column>
        <el-table-column prop="includedNum" label="库位数量" width="120">
        </el-table-column>
        <el-table-column prop="personName" label="负责人" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="200">
        </el-table-column>
        <el-table-column label="操作" width="150" class="last" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="$router.push(`/detail1/?id=${scope.row.id}`)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              v-show="scope.row.status === '启用'"
              @click="changeStatu1(scope.row)"
              >停用</el-button
            >
            <el-button
              type="text"
              size="small"
              v-show="scope.row.status === '停用'"
              @click="changeStatu2(scope.row)"
              >启用</el-button
            >
            <el-button type="text" size="small" @click="deleteFn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <page-tool
        :total="tableData.total"
        :paginationPage="tableData.pages"
        :paginationPagesize="tableData.size"
        @pageChange="pageChangeFn"
        @pageSizeChange="pageSizeChangeFn"
      />
    </div>
    <el-dialog title="导入库区" :visible="dialogVisible" width="30%">
      <el-upload  :http-request='importUpload' action="#">
      <div class="import">
          <i></i>
          <div class="text">点击或将表格文件拖拽到这里上传</div>
          <div class="text1">仅支持单个表单文件导入</div>
      </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn1">取 消</el-button>
        <el-button type="primary" @click="submit" class="btn2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PageTool from '@/components/page-tool/PageTool.vue'
import { getList, search, changeStatus, importStock } from '@/api/baseInfo/reservoirManage'
export default {
  components: { PageTool },
  name: 'storeManage-page',
  data () {
    return {
      form: {
        id: '',
        name: '',
        current: 2,
        size: 10,
        warehouseName: ''
      },
      tableData: {},
      tableList: [],
      loading: false,
      dialogVisible: false,
      importArr: []
    }
  },

  methods: {
    async getList () {
      const { data } = await getList(this.form)
      data.records.forEach((item) => {
        if (item.temperatureType === 'HW') {
          item.temperatureType = '恒温'
        } else if (item.temperatureType === 'CW') {
          item.temperatureType = '常温'
        } else if (item.temperatureType === 'LC') {
          item.temperatureType = '冷藏'
        }

        if (item.bearingType === 'ZX') {
          item.bearingType = '重型'
        } else if (item.bearingType === 'QX') {
          item.bearingType = '轻型'
        } else if (item.bearingType === 'BX') {
          item.bearingType = '中型'
        }

        if (item.status === 0) {
          item.status = '停用'
        } else if (item.status === 1) {
          item.status = '启用'
        }

        if (item.useType === 'RKHCQ') {
          item.useType = '入库缓存区'
        } else if (item.useType === 'ZJQ') {
          item.useType = '质检区'
        } else if (item.useType === 'CCQ') {
          item.useType = '存储区'
        } else if (item.useType === 'CKHCQ') {
          item.useType = '出库缓存区'
        } else if (item.useType === 'FJQ') {
          item.useType = '分拣区'
        }
      })
      this.tableData = data
      this.tableList = data.records
    },
    pageChangeFn (pageNum) {
      console.log(pageNum)
      this.form.current = pageNum
      this.getList()
    },

    pageSizeChangeFn (pageSize) {
      console.log(pageSize)
      this.form.size = pageSize
      this.getList()
    },

    async searchFn () {
      this.form.current = 1
      const { data } = await search(this.form)
      data.records.forEach((item) => {
        if (item.temperatureType === 'HW') {
          item.temperatureType = '恒温'
        } else if (item.temperatureType === 'CW') {
          item.temperatureType = '常温'
        } else if (item.temperatureType === 'LC') {
          item.temperatureType = '冷藏'
        }

        if (item.bearingType === 'ZX') {
          item.bearingType = '重型'
        } else if (item.bearingType === 'QX') {
          item.bearingType = '轻型'
        } else if (item.bearingType === 'BX') {
          item.bearingType = '中型'
        }

        if (item.status === 0) {
          item.status = '禁用'
        } else if (item.status === 1) {
          item.status = '启用'
        }

        if (item.useType === 'RKHCQ') {
          item.useType = '入库缓存区'
        } else if (item.useType === 'ZJQ') {
          item.useType = '质检区'
        } else if (item.useType === 'CCQ') {
          item.useType = '存储区'
        } else if (item.useType === 'CKHCQ') {
          item.useType = '出库缓存区'
        } else if (item.useType === 'FJQ') {
          item.useType = '分拣区'
        }
      })
      this.tableData = data
      this.tableList = data.records
    },
    cancle () {
      this.form = {
        code: '',
        name: '',
        status: null
      }
      this.getList()
    },

    changeStatu1 (row) {
      this.loading = true
      this.$confirm('确定要停用吗？').then(async () => {
        row.status = 0
        await changeStatus({ id: row.id, status: row.status })
        this.getList()
        this.loading = false
      })
    },
    changeStatu2 (row) {
      this.loading = true
      this.$confirm('确定要停用吗？').then(async () => {
        row.status = 1
        await changeStatus({ id: row.id, status: row.status })
        this.getList()
        this.loading = false
      })
    },
    deleteFn (id) {
      this.$notify({
        title: '警告',
        message: '该系统只作演示，不支持该操作',
        type: 'warning'
      })
    },

    // 导入
    importFn () {
      this.dialogVisible = true
    },
    beforeUpload (file) {
      if (!file.name.endsWith('.xlsx')) {
        return this.$message.error('仅支持xlsx格式')
      }
      return true
    },

    importUpload (res) {
      console.log(res)
      this.importArr = res
    },
    async submit () {
      const formData = new FormData()
      formData.append('file', this.importArr.file)
      const { data } = await importStock(formData)
      if (data.message.length === 0) {
        this.$message.success('导入成功')
      } else {
        this.$message.warning(`${data.message.join(',')}`)
      }
      this.dialogVisible = false
      this.getList()
    },

    // 导出
    async exportExcel () {
      // 映射
      const mapKeyPath = {
        所属仓库名称: 'warehouseName',
        库区名称: 'name',
        温度类型: 'temperatureType',
        承重类型: 'bearingType',
        库区编号: 'code',
        用途属性: 'useType',
        库区状态: 'status',
        库位数量: 'includedNum',
        负责人: 'personName',
        联系电话: 'phone'
      }
      // 对表头和内容数据做处理
      const header = Object.keys(mapKeyPath)
      const data = this.tableList.map(item => {
        return header.map(h => {
          return item[mapKeyPath[h]]
        })
      })
      const excel = await import('@/vendor/Export2Excel')
      excel.export_json_to_excel({
        header: header, // 表头 必填
        data: data, // 具体数据 必填
        filename: '库区模板表', // 文件名
        autoWidth: true, // 非必填
        bookType: 'xlsx' // 非必填
      })
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.storeManage {
  .head {
    height: 127px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    margin-bottom: 20px;
    p {
      margin-bottom: 10px;
      height: 18px;
      font-size: 12px;
      color: #887e7e;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
    }
    .el-select {
      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 1px solid #f8f5f5;
        background: #f8f5f5;
        border-radius: 6px;
      }
    }
    .el-input {
      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 1px solid #f8f5f5;
        background: #f8f5f5;
        border-radius: 6px;
      }
    }

    .btn {
      float: right;
      margin-top: 25px;
      .el-button {
        border-radius: 20px;
      }
    }
  }
  .content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    .tableInfo {
      padding: 20px 30px;
      .addBtn {
        background: #00be76;
        color: #fff;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
      }
      .textRight {
        float: right;
        .left {
          margin-right: 15px;
          height: 40px;
          border-radius: 20px;
          border: 0;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: center;
          line-height: 40px;
          padding-left: 26px;
          padding-right: 26px;
          cursor: pointer;
          outline: 0;
          background: #f8f5f5;
          color: #332929;
          &:hover {
            background: #ffb200;
          }
        }
        .right {
          height: 40px;
          border-radius: 20px;
          border: 0;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: center;
          line-height: 40px;
          padding-left: 26px;
          padding-right: 26px;
          cursor: pointer;
          outline: 0;
          background: #f8f5f5;
          color: #332929;
          &:hover {
            background: #ffb200;
          }
        }
      }
    }
    .el-table {
      ::v-deep .el-table__header-wrapper {
        th {
          background: rgb(249, 246, 238);
          text-align: center;
        }
      }
      ::v-deep .el-table__body-wrapper {
        td {
          text-align: center;
        }
      }
    }
  }
  .el-dialog__wrapper {
    ::v-deep .el-dialog__header {
      height: 56px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    }
    ::v-deep .el-dialog__body {
      padding: 20px;
     .el-upload{
        width: 100%;
        background: #f9f9f9;
        border-radius: 4px;
        border: 1px solid #eaeaea;
        text-align: center;
        color: #332929;
        line-height: 20px;
        .import {
          padding: 12px 20px 12px;
          background: #f9f9f9;
          border-radius: 4px;
          border: 1px solid #eaeaea;
          text-align: center;
          color: #332929;
          line-height: 20px;
          background-color: transparent;
          border: 0 none;
          border-radius: 0;
          width: auto;
          height: auto;
          position: relative;
          overflow: auto;
          text-align: center;
          cursor: pointer;
          i {
            background: url(http://www-wms-java.itheima.net/img/upload.413192d4.png) no-repeat;
            background-size: contain;
            display: inline-block;
            width: 57px;
            height: 57px;
          }
          .text {
            padding-bottom: 8px;
            font-size: 16px;
            color: #1f2d3d;
            text-align: center;
          }
          .text1 {
            color: #b5abab;
            font-size: 14px;
          }
          .excel-upload-input{
          display: none;
            z-index: -9999;
        }
      }
          }

    }

    .dialog-footer {
      .btn1 {
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
        background: #f8f5f5;
        color: #332929;
        &:hover {
          background: #ffb200;
          color: #332929;
        }
      }
      .btn2 {
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
        background: #f8f5f5;
        color: #332929;
        &:hover {
          background: #ffb200;
          color: #332929;
        }
      }
    }
  }
}
</style>
